<template>
  <div class="container">
    <header>
      <img
        src="@/assets/lt.png"
        alt=""
        @click="backHandler"
      >
      <span>购物车</span>
      <i v-if="!showEdit" @click="ShowEdit">编辑</i>
      <i v-if="showEdit" @click="CloseEdit">完成</i>
    </header>
    <div class="whitespace"/>
    <div class="un_login_cart" v-if="!user.isLogin">
      <div class="wrap">
        <img src="@/assets/cart_empty.png" alt="" class="bg">
        <h4>登录后才能看到商品哦~</h4>
        <router-link tag="span" to="/login">立即登录</router-link>
      </div>
    </div>
    <div class="login_cart" v-if="user.isLogin">
      <div class="cart_empty" v-show="!showCart">
        <img src="@/assets/cart_empty.png" alt="">
        <div class="empty_info" >
          <h4>购物车还没有商品哦~</h4>
          <router-link to="/home" tag="div">
            <span >去逛逛</span>
          </router-link>
        </div>
      </div>
      <div class="cart_not_empty" v-show="showCart">
        <div class="cart_main">
          <div
            class="prod"
            v-for="item of cart"
            :key="item.id"
          >
            <label class="input-checkbox">
              <input
                type="checkbox"
                :checked="item.checked"
                @click="status(item.id)"
              >
              <span></span>
            </label>
            <img :src="item.img" alt="">
            <div class="info">
              <div class="desc">{{ item.name }}</div>
              <div class="count">
                <span class="price">￥<i>{{ item.price }}</i></span>
                <div class="component">
                  <span class="inc" @click="addCartItem({id:item.id})">+</span>
                  <span class="num">{{ item.count }}</span>
                  <span class="dec" @click="reduceCartItem(item.id)">-</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="footer" v-if="!showEdit">
          <div class="left">
            <label class="input-checkbox">
              <input
                type="checkbox"
                @change="checked(allCheck)"
                :checked="allCheck"
              >
              <span>全选</span>
            </label>
            <div class="totalPrice">
              <span>合计：</span>
              <i>￥<b>{{ totalPrice }}</b></i>
            </div>
          </div>
          <div class="config">
            去结算(<span>{{ totalCount }}</span>)
          </div>
        </div>
        <div class="footer" v-if="showEdit">
          <div class="left">
            <label class="input-checkbox">
              <input
                type="checkbox"
                @change="checked(allCheck)"
                :checked="allCheck"
              >
              <span>全选</span>
            </label>
          </div>
          <div class="config" @click="deleteCartItem">删除所选</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  name: 'Cart',
  data () {
    return {
      showCart: false,
      length: 0
    }
  },
  computed: {
    ...mapState(['cart', 'allCheck', 'user', 'showEdit']),
    ...mapGetters(['totalCount', 'totalPrice'])
  },
  methods: {
    ...mapMutations(['reduceCartItem',
      'addCartItem',
      'status',
      'checked',
      'deleteCartItem',
      'ShowEdit',
      'CloseEdit'
    ]),
    backHandler () {
      this.$router.go(-1)
    }
  },
  mounted () {
    let length = this.cart.length
    if (length > 0) {
      this.showCart = true
    } else {
      this.showCart = false
    }
  },
  updated () {
    let length = this.cart.length
    if (length > 0) {
      this.showCart = true
    } else {
      this.showCart = false
    }
  }
}
</script>

<style lang="scss" scoped>
  .container {
    display: flex;
    flex-direction: column;
    header {
      width: 100%;
      height: 45px;
      background-color: #fff;
      border-bottom: 0px solid #999;
      position: fixed;
      top: 0;
      left: 0;
      text-align: center;
      z-index: 9999;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      align-items: center;
      padding-right: 15px;
      img {
        display: block;
        width: 39px;
        height: 48px;
      }
      span {
        display: inline-block;
        height: 45px;
        font-size: 16px;
        line-height: 45px;
      }
      i {
        display: inline-block;
        font-size: 12px;
        color: rgb(51, 51, 51);
      }
    }
    .whitespace {
      width: 100%;
      height: 45px;
      background-color: #fff;
      border-bottom: 2px solid #999;
    }
    .un_login_cart {
      flex: 1;
      position: relative;
      .wrap {
        width: 140px;
        height: 200px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        margin-top: 40%;
        .bg {
          display: block;
          height: 88px;
          width: 102px;
          margin: 0 auto;
        }
        h4 {
          color: rgb(153, 153, 153);
          font-size: 13px;
          margin-top: 32px;
        }
        span {
          margin: auto;
          display: block;
          width: 52px;
          height: 17px;
          border-radius: 3px;
          border: 1px solid;
          border-color: rgb(170, 170, 170);
          margin-top: 12px;
          padding: 8px 20px;
          color: rgb(119, 119, 119);
          font-size: 13px;
        }
      }
    }
    .login_cart {
      .cart_empty {
        height: 148px;
        padding: 0 50px;
        background-color: rgb(250, 250, 250);
        display: flex;
        align-items: center;
        justify-content: space-around;
        img {
          display: block;
          width: 95px;
          height: 81px;
        }
        div {
          h4 {
            margin-bottom: 12px;
            line-height: 20px;
            color: rgb(152, 131, 120);
            font-size: 14px;
          }
          span {
            display: block;
            background-color: rgb(226, 115, 104);
            width: 77px;
            height: 23px;
            line-height: 23px;
            text-align: center;
            font-size: 14px;
            color: #fff;
          }
        }
      }
      .cart_not_empty {
        padding-bottom: 4px;
        padding-top: 15px;
        background-color: rgb(255, 255, 255);
        .cart_main {
          .prod {
            width: 100%;
            padding-bottom: 4px;
            padding-top: 15px;
            height: 74px;
            .input-checkbox {
              display: block;
              width: 18px;
              line-height: 74px;
              padding: 0 10px 0 20px;
              cursor: pointer;
              float: left;
              span {
                display: inline-block;
                height: 18px;
                line-height: 18px;
                position: relative;
                font-size: 13px;
                color: rgb(51, 51, 51);
              }
                span:before {
                content: '';
                position: absolute;
                width: 18px;
                height: 18px;
                border: 1px solid #999;
                box-sizing: border-box;
                border-radius: 50%;
                left: 0;
              }
              span:after {
                content: '';
                position: absolute;
                width: 10px;
                height: 10px;
                background-color: #09f;
                box-sizing: border-box;
                border-radius: 50%;
                left: 5px;
                top: 10px;
                opacity: 0;
              }
              input {
                display: none;
              }
              input:checked ~ span:before {
                background: url(../assets/checkbox.png) no-repeat center;
                background-size: 18px 18px;
                border: none;
                transition: border-color 0.5s ease-in;
              }
            }
            img {
              float: left;
              display: block;
              width: 74px;
              height: 74px;
              margin-right: 10px;
            }
            .info {
              float: left;
              .desc {
                width: 234px;
                height: 34px;
                line-height: 17px;
                font-size: 14px;
                color: rgb(51, 51, 51);
                text-overflow: ellipsis;
                white-space: pre-wrap;
              }
              .count {
                width: 234px;
                height: 22px;
                margin-top: 20px;
                .price {
                  font-size: 10px;
                  line-height: 22px;
                  color: rgb(191, 17, 17);
                  i {
                    font-size: 14px;
                  }
                }
                .component {
                  float: right;
                  span {
                    float: right;
                    display: block;
                    width: 30px;
                    height: 20px;
                    line-height: 20px;
                    font-size: 12px;
                    color: #333;
                    text-align: center;
                    border: 1px solid rgb(153, 153, 153);
                    border-right: none;
                  }
                  .dec {
                    font-size: 18px;
                  }
                  .inc {
                    font-size: 18px;
                    border-right: 1px solid rgb(153, 153, 153);
                  }
                }
              }
            }
          }
        }
        .footer {
          width: 100%;
          height: 54px;
          background-color: #fff;
          border-top: 1px solid #dedede;
          position: fixed;
          bottom: 51px;
          left: 0;
          .left {
            height: 54px;
            width: 73.33%;
            float: left;
            .input-checkbox {
              cursor: pointer;
              display: block;
              float: left;
              line-height: 54px;
              margin-left: 12px;
              span {
                display: inline-block;
                height: 18px;
                line-height: 18px;
                padding-left: 24px;
                position: relative;
                font-size: 13px;
                color: rgb(51, 51, 51);
              }
              span:before {
                content: '';
                position: absolute;
                width: 18px;
                height: 18px;
                border: 1px solid #999;
                box-sizing: border-box;
                border-radius: 50%;
                left: 0;
              }
              span:after {
                content: '';
                position: absolute;
                width: 10px;
                height: 10px;
                background-color: #09f;
                box-sizing: border-box;
                border-radius: 50%;
                left: 5px;
                top: 10px;
                opacity: 0;
              }
              input {
                display: none;
              }
              input:checked ~ span:before {
                background: url(../assets/checkbox.png) no-repeat center;
                background-size: 18px 18px;
                border: none;
                transition: border-color 0.5s ease-in;
              }
            }
            .totalPrice {
              float: right;
              height: 54px;
              font-size: 13px;
              padding-right: 10px;
              span,
              i,
              b {
                display: inline-block;
                line-height: 54px;
                height: 54px;
              }
              span {
                color: #333;
              }
              i,
              b {
                color: rgb(191, 17, 17);
              }
            }
          }
          .config {
            float: right;
            width: 26.67%;
            height: 54px;
            background-color: rgb(191, 17, 17);
            color: #fff;
            font-size: 13px;
            text-align: center;
            line-height: 54px;
          }
        }
      }
    }
  }
</style>
